<template>
  <div v-if="scenesPlay">
    <iframe
      ref="iframe"
      :src="url"
      frameborder="0"
      style="background-color:transparent;width: 100%; min-height: 100%;"
       v-if="url && player"
    ></iframe>
    <div class="cover" v-if="urlModel"></div>
  </div>
  <div v-else>
    <iframe
      ref="iframe"
      :src="url"
      frameborder="0"
      style="background-color:transparent;width: 100%; min-height: 100%;"
      v-if="url"
    ></iframe>
    <div class="cover" v-if="urlModel"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'sxc-iframe',
  props: {
    url: {
      type: String,
      // default: 'http://www.taobao.com'
      default:'http://shangxincheng.cn:8105/ad/#/home'
    },
    refreshTime: {
      type: [String, Number],
      default: 0
    },
    play:{
      type: [Boolean, Number],
      default: false
    }
  },
  watch:{
    play: {
      handler(v1){
        this.player = v1;
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      timer: null,
      urlModel: true,
      scenesPlay: false,
      player: false
    }
  },
  computed:{
    ...mapGetters('programs',['currElement'])
  },
  mounted() {
    if(this.$route.meta.title === '预览' && this.$route.name==='view'){
      this.urlModel = false;
      this.scenesPlay = true;
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 999;
}
</style>
